jQuery学习
前置知识
什么是 jQuery
参考资料 jQuery
jQuery 是一个 JavaScript 库;其极大地简化了 JavaScript 编程。
例如曾经操作 DOM 节点时需要手写一串代码
let dl = document.getElementById('t1');
而使用了 jQuery 之后可以直接使用 CSS 那样的选择器直接取得
let dl = $("#t1")
当然上面只是 jQuery 的一个用途
配置环境
其实只需要引入一个远程的包就好了
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
语法
因为 jQuery 本身就是封装的原生 JavaScript,所以实际上 jQuery 的所有操作都是在调用这个 jQuery 对象,但是每次调用这个 jQuery 的方法都需要写一个名称太麻烦了,所以通过标识符 $
来代指 jQuery 对象
jQuery 只需传入一个回调函数就能执行了
// 例如
$(function(){
$("#btn1").click(function(){
alert("点击了按钮")
});
});
选择器
语法
$(selector).action()
//css中的选择器它全都能用
$('p').click(); //标签选择器
$('#id').click(); //id选择器
$('.class').click(); //class选择器
追加元素
参考自文档--append(content|fn) 参考自文档--appendTo(content)
append
向每个匹配的元素内部追加内容。
这个操作与对指定的元素执行appendChild方法,将它们添加到文档中的情况类似。
$("p").append("<b>Hello</b>");
appendTo
把所有匹配的元素追加到另一个指定的元素元素集合中。
实际上,使用这个方法是颠倒了常规的 $(A).append(B)
的操作,即不是把B追加到A中,而是把A追加到B中。
<p>I would like to say: </p>
<div></div><div></div>
$("p").appendTo("div");
结果
<div><p>I would like to say: </p></div>
<div><p>I would like to say: </p></div>
获取input值
$(" #test ").val()
$(" input[ name='test' ] ").val()
$(" input[ type='text' ] ").val()
$(" input[ type='text' ]").attr("value")
事件Event
- 鼠标事件 mouse
- 键盘事件
- 其他事件
<!--获取鼠标当前坐标-->
<span id="coordinate"></span>
<div id="divMove" style="width: 500px;height: 500px;background: coral">
在这移动鼠标
</div>
<script>
//当网页元素加载完毕后响应事件(总之就是等页面加载完才执行)
// $(document).ready(function () {
//
// })
//上面的写法太长了,所以简化成
$(function () {
$('#divMove').mousemove(function (e) {
//注意这个 text() 有个重载,如果没有设置值 则是获得值
$('#coordinate').text('x:'+e.pageX+' y:'+e.pageY);
})
})
</script>
更多事件参考这里
选择器
js选择器
之前的js在没有引入jQuery之前都是手写查找器的方式来查询HTML的页面元素 如下:
按ID查找:
var a = document.getElementById("dom-id");
按tag查找(就是标签):
var divs = document.getElementByTagName("div");
查找子tag(例如查找<table class='green'>里面所有的<tr>
)
var table = document.getElementByTagName("table");
for(var i=0;i<table.children;i++){
// 过滤出<tr>...
}
jQuery选择器
jQuery的选择器类似于css的选择器
类别 | CSS选择器 | jQuery选择器 |
---|---|---|
ID选择器 | #myID | $("#myID") |
类选择器 | .myClass | $(".myClass") |
标签选择器 | p | $("p") |
层次选择器 | div > strong | $("div>strong") |
css称为伪类选择器 jQuery称之为过滤选择器 | p:nth-child(3) | $("p:nth-child(3)") |
例子如下:
选择器
- 按ID找:
var div = $('#abc')
查找<div id="abc">
- 按tag找:
var ps = $('p')
返回所有<p>
标签(ps.length
可以返回有多少个<p>
标签) - 按class找:
var a = $('.red')
所有节点包含class="red"
都将返回 - 按属性查找:
//找出属性 name='email'的
var email = $['[name=email]'];层级选择器
还是和css的一样
<div class='爷'>
<ul class='爸'>
<li class='子1'></li>
</ul>
</div>
// 选出子
$(.爸 .子1)
jQuery对象
选择器返回的对象是jQuery对象(类似于数组:
例如:var div = $('#abc')
的结果是:[<div id="abc"></div>,<div id="abc"></div>,....]
,如果不存在这个id="abc"则返回[]
即空数组)
jQuery对象和Dom对象之间可以相互转换
var div = $('#abc');
// 假设存在div,获取第一个dom元素
var divDom = div.get(0);
// 重新把Dom包装为jQuery对象
var another = $(divDom)
应用
$(function(){
var btn = $("#btn");
bth.click(function(){
alert("点击了按钮")
});
})
常用事件方法
jQuery 事件方法 事件方法会触发匹配元素的事件,或将函数绑定到所有匹配元素的某个事件。
click() 方法
$("button").click(function(){
$("p").slideToggle();
});
定义和用法 当点击元素时,会发生 click 事件。 当鼠标指针停留在元素上方,然后按下并松开鼠标左键时,就会发生一次 click。 click() 方法触发 click 事件,或规定当发生 click 事件时运行的函数。
将函数绑定到 click 事件
$(selector).click(function)
Ajax 异步请求
$.ajax({
url:'hello/testajax', //请求的地址
type:'post',
data:'id='+数据, //在servlet就可以通过 req.getParameter('id')来取得
dataType:'json',
//处理以前需要做的功能
beforeSubmit : function() {
$("tipMsg").text("数据正在保存,请稍候...");
$("#insertBtn").attr("disabled", true);
},
//请求成功的回调函数,
success:function(data){
console.log(data);
let names = '';
let details = '';
// 解析数组,注意这里有个坑,必须给let i = 0声明初始值
for(let i = 0; i < data.length;i++){
names += "<h4>书名:" + data[i].bookName + "</h4>";
details += "<h4>介绍:" + data[i].detail + "</h4>";
}
$('#book-name').append(names);
$('#book-detail').append(details);
},
//请求失败,包含具体的错误信息
error : function(e){
console.log(e.status);
console.log(e.responseText);
}
})
在java里通过Response响应请求
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException
{
// TODO 自动生成的方法存根
List<TestUser> list = new ArrayList<TestUser>();
list.add(new TestUser("小明", 16));
list.add(new TestUser("小h", 19));
list.add(new TestUser("小a", 13));
list.add(new TestUser("小b", 12));
list.add(new TestUser("小c", 16));
list.add(new TestUser("小d", 17));
Gson gson = new Gson();
String str = gson.toJson(list);
System.out.println(str);
//别忘了编码问题
resp.setCharacterEncoding("UTF-8");
resp.getWriter().write(str);
}